<nz-card class="m-b-2">
    <!-- seach START -->
    <div class="zdy-seach-wrap">
        <div nz-space class="seach-content">
            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">综合搜索</label>
                <div class="seach-control">
                    <input type="text" nz-input placeholder="用户ID/昵称/手机号码" nzSize="default" [(ngModel)]="queryForm.user">
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <label class="seach-label">用户初始身份</label>
                <div class="seach-control">
                    <nz-select nzShowSearch nzPlaceHolder="全部" [(ngModel)]="queryForm.temUserType">
                        <nz-option nzLabel="未选择" nzValue="0"></nz-option>
                        <nz-option nzLabel="个人" nzValue="1"></nz-option>
                        <nz-option nzLabel="门店商户" nzValue="2"></nz-option>
                        <!-- <nz-option nzLabel="个人商户" nzValue="3"></nz-option> -->
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">用户真实身份</label>
                <div class="seach-control">
                    <nz-select nzShowSearch nzPlaceHolder="全部" [(ngModel)]="queryForm.userType">
                        <nz-option nzLabel="个人" nzValue="1"></nz-option>
                        <nz-option nzLabel="门店商户" nzValue="2"></nz-option>
                        <!-- <nz-option nzLabel="个人商户" nzValue="3"></nz-option> -->
                    </nz-select>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
                <label class="seach-label">注册时间</label>
                <div class="seach-control">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
                </div>
            </div>

            <div *nzSpaceItem class="seach-item">
                <button nz-button nzType="primary" (click)="query()" class="m-r-8">查询</button>
                <button nz-button nzType="default" (click)="resetData()">重置</button>
                <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                    {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                </button>
            </div>
        </div>
    </div>
    <!-- seach END -->
</nz-card>

<nz-card>
    <main class="pagination-wrap-position">
        <div class="table-wrap">
            <nz-table
                #basicTable
                nzSize="small"
                nzShowSizeChanger
                nzShowQuickJumper
                nzOuterBordered
                [nzScroll]="{ x: '1100px' }"
                [nzFrontPagination]="false"
                [nzLoadingDelay]="100"
                [nzLoading]="tableLoading"
                [nzData]="listOfData?.list"
                [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
                [nzTotal]="listOfData?.total"
                [nzPageIndex]="listOfData?.pageNum"
                [nzPageSize]="listOfData.pageSize"
                [nzShowTotal]="totalTemplate"
                (nzPageIndexChange)="onPageIndexChange($event)"
                (nzPageSizeChange)="onPageSizeChange($event)"
            >
                <thead>
                    <tr>
                        <th nzAlign="center" nzWidth="120px" nzLeft>用户ID</th>
                        <th nzAlign="center" nzWidth="220px">昵称</th>
                        <th nzAlign="center" nzWidth="180px">手机号码</th>
                        <!-- <th nzAlign="center" nzWidth="250px">门店名称</th> -->
                        <th nzAlign="center" nzWidth="220px">用户初始身份</th>
                        <th nzAlign="center" nzWidth="220px">用户真实身份</th>
                        <!-- <th nzAlign="center">账号状态</th> -->
                        <th nzAlign="center" nzWidth="230px">最近登录时间</th>
                        <th nzAlign="center" nzWidth="230px">注册时间</th>
                        <th nzAlign="center" nzWidth="130px">现金</th>
                        <th nzAlign="center" nzWidth="130px">爱豆余额</th>
                        <th nzAlign="center" nzWidth="130px">验机分</th>
                        <!-- <th nzAlign="center" nzWidth="120px">粉丝</th> -->
                        <th nzAlign="center" nzWidth="250px" nzRight>操作</th>
                    </tr>
                </thead>
      
                <tbody>
                    <!-- <tr *ngIf="searchHint && listOfData?.list">
                        <td nzAlign="center" colspan="9">
                            <span>搜索 “{{searcName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
                            <a nz-button nzType="link" (click)="backList()">返回原列表</a>
                        </td>
                    </tr> -->
                    <tr *ngFor="let data of basicTable.data; let index = index;">
                        <!-- 用户ID -->
                        <td nzAlign="center" nzLeft>{{ data.id }}</td>
                        <!-- 昵称 -->
                        <td nzAlign="center" nzBreakWord>
                            <div class="ellipsis" (click)="copy(data.nickname)">{{ data.nickname ? data.nickname : '-' }}</div>
                        </td>
                        <!-- 手机号码 -->
                        <td nzAlign="center">{{ data.phone ? data.phone : '-' }}</td>
                        <!-- 门店名称 -->
                        <!-- <td nzAlign="center" nzBreakWord>{{ data.storeName ? data.storeName : '-' }}</td> -->
                        <!-- 用户初始身份 -->
                        <td nzAlign="center">{{ data.temUserTypeText }}</td>
                        <!-- 用户真实身份 -->
                        <td nzAlign="center">{{ userType_To_text(data.userType) }}</td>
                        <!-- 账号状态 -->
                        <!-- <td nzAlign="center" class="{{getStatusColor(data.status)}}">{{data.statusText}}</td> -->
                        <!-- 最近登录时间 -->
                        <td nzAlign="center">{{ data.lastLoginTime || '-' }}</td>
                        <!-- 注册时间 -->
                        <td nzAlign="center">{{ data.regTime || '-' }}</td>
                        <!-- 现金 -->
                        <td nzAlign="center">{{ data.cashSubtract || '0' }}</td>
                        <!-- 爱豆余额 -->
                        <td nzAlign="center">{{ data.subtract || '0' }}</td>
                        <!-- 验机分 -->
                        <td nzAlign="center">{{ data.phoneCheckBranch || '0' }}</td>
                        <!-- 粉丝 -->
                        <!-- <td nzAlign="center">
                            <button nz-button nzType="link" [disabled]="!data.fansCount" (click)="showFansModal(data)">
                                {{ data.fansCount || '0' }}
                            </button>
                        </td> -->
                        <!-- 操作 -->
                        <td nzAlign="center" nzRight>
                            <a
                                *ngIf="permission.userPermission.has('customer:manage:detail')"
                                nz-button
                                nzType="link"
                                nzSize="small"
                                [routerLink]="['../tabs',data.id,0]">
                                详情
                            </a>
                            <a
                                *ngIf="permission.userPermission.has('customer:manage:track')"
                                nz-button
                                nzType="link"
                                nzSize="small"
                                (click)="followModal(data.id)">
                                跟进
                            </a>
                            <a
                                nz-button
                                nzType="link"
                                nzSize="small"
                                (click)="addLabel(data.id)">
                                打标
                            </a>
                        </td>
                    </tr>
                </tbody>
            </nz-table>
      
            <!-- 分页template -->
            <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
        </div>
    </main>
</nz-card>

<nz-modal [(nzVisible)]="followVisible" nzTitle="跟进" (nzOnCancel)="handleCancel()" [nzFooter]="null"
    [nzWidth]="'1050px'">
    <ng-container *nzModalContent>
        <div class="importBox">
            <textarea rows="6" nz-input [(ngModel)]="followParam.content" placeholder="请输入内容，限制100字"
                [maxlength]="100"></textarea>
            <div class="bt-box">
                <label for="file" class="followFile">
                    <span>选择文件</span>
                    <input id="file" type="file" multiple="multiple" [(ngModel)]="inputVal"
                        (change)="handleFileInput($event,2)">
                </label>
                <font>请选择图片、office文件、PDF文件</font>
                <button nz-button nzType="primary" (click)="followerSave()">提交</button>
            </div>
            <ul>
                <li *ngFor="let item of followParam.enclosure; index as i">
                    <span>{{item.showUrl}}</span>
                    <a nz-button nz-button-tdlink nzType="link" (click)="deleteFollowImg(i)">删除</a>
                </li>
            </ul>
        </div>
        <app-follow-component *ngIf="followParam.relationInformation" [id]="followParam.relationInformation" type="3">
        </app-follow-component>
    </ng-container>
</nz-modal>

<!-- S 粉丝Modal -->
<fans-table-modal #fansModal [userId]="fansItems.id"></fans-table-modal>
<!-- E 粉丝Modal -->
